import React, { useState, useEffect } from "react";
import CommonModal from "@/components/CommonModal";
import { Select, Form, message } from "antd";
import { Input } from "antd";
import { addQuickSearchOp } from "../../../../services";
import CommonLoading from "@/components/CommonLoading";

export const layout = {
	//发布表单排布
	labelCol: {
		span: 6
	},
	wrapperCol: {
		span: 16
	}
};
const { Option } = Select;

const QuickSearchModal = ({ items, searchForm, page, handleOk, handleCancel }) => {
	const [form] = Form.useForm();

	const [open, setOpen] = useState(false);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, []);

	const handleSave = () => {
		form.validateFields().then(async ({ name }) => {
			if (items.some(item => item.name == name)) {
				return message.info("名称不可重复");
			}
			setLoading(true);
			const { data, success } = await addQuickSearchOp({
				name,
				page,
				param: JSON.stringify(searchForm)
			});
			setLoading(false);
			if (success) {
				message.success("保存成功！");
				handleOk();
			}
		});
	};

	//点击确定
	const onOk = () => {
		form.validateFields().then(val => {
			handleSave(val.name);
		});
	};

	//点击取消
	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		handleCancel();
	};

	return (
		<CommonModal
			title="另存为快捷查询条件"
			open={open}
			width="456px"
			onOk={onOk}
			okText="确定"
			minHeight={124}
			onCancel={onCancel}
			afterClose={afterClose}
		>
			<Form form={form}>
				<Form.Item name="name" rules={[{ required: "true", message: "请输入快捷查询名称" }]}>
					<Input placeholder="必填，请输入快捷查询名称" showCount maxLength={10} size="large" />
				</Form.Item>
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default QuickSearchModal;
